<template>
  <div class="mains-content"   style="position: relative; overflow-y: auto;">
    <el-card style="width: 70%; min-height: 1000px; margin: 20px auto; border-radius: 20px;">
      <div style="padding: 15px 20px;">
        <el-row :gutter="10">
          <el-col :span="11">
            <div style="height: 60%;">
              <img v-if="styleImg=== ''" :src="medicineData.photo" style="width: 95%; height:400px; border-radius: 20px">
              <img v-else :src="styleImg" alt="" style="width: 95%; height: 400px; border-radius: 20px">
            </div>
            <div style="margin-left: 5px">
              <img v-for="item in medicineData.medicinesStyleList" :key="item.id" :src="item.stylePhoto"  @click="changeStyleImg(item)"
                    style="width: 100px; height: 100px; border-radius: 20px; padding-left: 10px;">
            </div>
          </el-col>
          <el-col :span="13" style="position: relative; height: 500px">
            <div style="margin-top: 5px">
              <div style="display: flex;">
                <div style="font-size: 20px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">
                  {{medicineData.name}}
                </div>
                <div style="margin-left: 100px;margin-top:2px;font-size: 18px">批准文号：<span style="color: #333333">{{medicineData.approvalSymbol}}</span></div>
              </div>
              <div class="divider"></div>
              <div style="color: #666666FF; margin-top: 18px;display: flex;font-size: 14px">
                <div style="flex: 1; margin-top: 8px;color: #333333">剂型：{{medicineData.dosageForm }}</div>
                <div style="flex: 1; margin-top: 8px;color: #333333">分类：{{ medicineData.typeName}}</div>
                <div style="color: red;flex: 1;">商家报价：
                  <span style="font-size: 20px">{{ this.price }}元/起</span>
                </div>
              </div>
              <div style="color: #666666FF; margin-top:20px;font-size: 14px">
                <div style="margin-top: 10px">生产企业：<span style="color: #333333">{{ medicineData.manufacturing }}</span>
                  <span style="margin-left: 20px;">销售商家:</span>
                  <span class="item" @click="$router.push('/front/Business?id='+medicineData.businessId)">{{ medicineData.businessName}}</span>
                </div>
                <div style="margin-top: 10px">上市许可人：<span style="color: #333333">{{ medicineData.listedHead}}</span></div>
              </div>
              <div style="margin-top: 20px;font-size: 14px">
                <div style="color: #666666; margin-top: 20px;">
                  <div>
                    {{ medicineData.deliver }}<span style="margin-left: 12px">配送：至 </span>
                    <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link" style="display: flex;">
                    <span style="flex: 1;font-size: 14px">{{ selectedAddress }}</span><i class="el-icon-arrow-down el-icon--right"></i></span>
                      <el-dropdown-menu slot="dropdown" style="min-width: 400px" >
                        <el-dropdown-item style="min-width: 400px" v-for="address in addressData" :key="address.id" :command="address.id">{{address.username + ' - ' + address.address + ' - ' + address.phone }}</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                  <div style=" margin-top: 10px; margin-left: 40px">
                    快递: 免运费 最迟24小时内发货
                  </div>
                </div>
              </div>
              <div style="margin-top: 20px;font-size: 14px">
                <div style="color: #666666; margin-top: 20px;">
                  保障：
                  <el-dropdown>
                    <span class="el-dropdown-link" style="display: flex;">
                      <span style="flex: 1;font-size: 14px">{{ selectedContent }}</span>
                      <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown" class="el-dropdown-menus">
                      <el-dropdown-item>假一赔十</el-dropdown-item>
                      <el-dropdown-item>买贵必赔</el-dropdown-item>
                      <el-dropdown-item>退货运费险</el-dropdown-item>
                      <el-dropdown-item>急速退款</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
              <div style="margin-top: 20px">
                <div style="color: #666666; margin-top: 18px; display: flex;">
                  <span style="margin-top: 10px;font-size: 14px">包装规格:</span>
                  <div style="flex: 7;display: flex; flex-wrap: wrap;">
                    <div style="padding-left: 10px;">
                      <el-button v-for="(buttonText, index) in medicineData.medicinesStyleList"
                                 :key="index" @click="changePrice(buttonText,index)"
                                 :class="{ 'is-active': selectedButtonIndex1 === index }"
                                 style="margin-left:5px;margin-bottom: 10px;min-width: 50px" :style="{'max-width': computeButtonWidth(buttonText)}">
                        {{buttonText.styleDescribe}}
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
              <div style="margin-top: 18px;display: flex;font-size: 14px">
                <div style="width: 50px;padding-top: 5px;color: #666666FF">数量:</div>
                <el-input-number v-model="num" style="width: 120px;" @change="handleChange" :min="1"></el-input-number>
                <div style="width: 50px;padding-left: 15px;color: #666666FF">有货</div>
                <div style="color: #666666FF; margin-top: 5px;margin-left: 100px;display: flex">销量：{{ medicineData.count }}+盒
                </div>
              </div>
            </div>
            <div style="color: #666666FF;margin-top:100px;height: 50px; position: absolute; bottom:0;">
              <el-button style="background-color: #FE7843;color: white;width: 150px;height: 40px" @click="pay">立即购买</el-button>
              <el-button style="background-color: #f6ad0b;color: white; width: 150px;height: 40px;margin-left: 25px" @click="addCart">
                加入购物车
              </el-button>
              <el-button style="background-color: #ffffff;color: black; width: 100px;height: 40px;margin-left: 25px" @click="collect">
                <i v-if="collectStar" class="el-icon-star-on"></i>
                <i v-else class="el-icon-star-off"></i> 收藏
              </el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="padding: 15px 20px;position: relative;" >
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-show="activeName==='first'" label="图文详情" name="first" style="display: flex;">
              <div style="padding: 10px; display: flex;">
                <div style="padding: 10px 10px;flex: 9;max-width: 750px; overflow: hidden;border-radius: 10px">
                  <div style="width: 600px" v-html="medicineData.detailsPhoto"></div>
                </div>
              </div>
          </el-tab-pane>
          <el-tab-pane v-show="activeName==='second'" label="商品参数" name="second" style="display: flex;">
              <div style="padding: 10px; flex: 1;display: flex">
                <div style="flex: 9; max-width: 750px; overflow: hidden;">
                  <img :src="medicineData.instructionManual" style="width: 550px; height: 120%; border-radius: 20px;">
                </div>
                <div style="flex: 5;"></div>
              </div>
          </el-tab-pane>
          <el-tab-pane v-show="activeName==='three'" label="用户评价" name="three">
              <div style="padding: 10px; flex: 1;display: flex">
                <div style="margin-top: 10px;flex: 9">
                  <div style="margin-top: 20px" v-for="item in userCommentData">
                    <div style="display: flex">
                      <div style="width: 40px">
                        <img v-if="item.userList && item.userList.length > 0" :src="item.userList[0].avatar" alt="" style="height: 40px; width: 40px; border-radius: 50%;">
                        <img v-if="item.doctorList && item.doctorList.length > 0" :src="item.doctorList[0].avatar" alt="" style="height: 40px; width: 40px; border-radius: 50%;">
                      </div>
                      <div style="width: 200px; margin-left: 10px">
                        <div style="display: flex">
                          <div v-if="item.userList && item.userList.length > 0" style="font-weight: 700; font-size: 17px; color: #000000FF">{{item.userList[0].name}}</div>
                          <div v-if="item.doctorList && item.doctorList.length > 0" style="font-weight: 700; font-size: 17px; color: #000000FF">{{item.doctorList[0].name}}</div>
                          <el-rate style="margin-left: 10px;margin-top: 2px" v-model="item.star" disabled></el-rate>
                        </div>
                        <div style="color: #7A7A7AFF">{{item.time}}</div>
                      </div>
                    </div>
                    <div style="margin-top: 15px; font-size: 16px">{{item.content}}</div>
                  </div>
                </div>
                <div style="flex: 5;"></div>
              </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
    <el-card class="fixed-sidebar">
      <!-- 右侧固定部分 -->
      <div style="display: flex; padding: 20px 20px 18px 20px;">
        <div style="flex: 1; margin-right: 20px;">
          <img :src="medicineData.photo" style="border-radius: 20px; width: 120px; height: 120px;">
        </div>
        <div style="flex: 5; margin-top: 20px;">
          <div style="color: red;font-size: 16px;">药品价格：<span style="font-size: 18px;">￥{{ price }}/盒</span></div>
          <div style="color: #666666FF; margin-top: 10px;font-size: 16px">销量：{{ medicineData.count }}+盒</div>
        </div>
      </div>
      <div class="scrollbar-class" style="height: 300px; overflow-y: auto; margin-left: 15px; margin-top: 20px;">
        <div style="margin-left: 20px;">
          <div style="color: #666666; display: flex;">
            <span style="padding-top: 8px; font-size: 15px;margin-right: 10px">包装规格:</span>
            <div style="flex: 7; display: flex; flex-wrap: wrap;">
              <div v-for="(buttonText, index) in medicineData.medicinesStyleList" :key="index" style="margin-bottom: 10px;">
                <el-button @click="changePrice(buttonText, index)" :class="{ 'is-active': selectedButtonIndex1 === index }" style="min-width: 50px; max-width: 100%;">
                  {{ buttonText.styleDescribe }}
                </el-button>
              </div>
            </div>
          </div>
        </div>
        <div style="margin-top: 18px; margin-left: 20px; display: flex;">
          <div style="width: 50px; padding-top: 5px; color: #666666FF;">数量:</div>
          <el-input-number v-model="num" style="width: 120px;" @change="handleChange" :min="1"></el-input-number>
          <div style="width: 50px; color: #666666FF; padding-top: 5px; padding-left: 10px;">有货</div>
        </div>
        <div style="color: #666666; margin-top: 20px;">
          <el-button style="background-color: #f6ad0b;color: white; width: 100px; height: 40px; margin-left: 30px;" @click="addCart">加入购物车</el-button>
          <el-button style="background-color: #ffffff;color: black; width: 80px; height: 40px; margin-left: 30px;" @click="collect">
            <i v-if="collectStar" class="el-icon-star-on"></i>
            <i v-else class="el-icon-star-off"></i>
            <span>收藏</span>
          </el-button>
        </div>
      </div>
    </el-card>
  </div>

</template>

<script>
export default {
  data() {
    let MedicinesId = this.$route.query.id
    return {
      // 初始窗口宽度
      windowWidth: 0,
      // 初始窗口高度
      windowHeight: 0,
      // 目标窗口比例
      targetWindowRatio: 0.75, // 例如，80%
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      medicineData:[],
      addressData:[],
      businessId:[],
      userCommentData:[],
      medicinesId:MedicinesId,
      selectedAddress: '请选择地址',
      collectStar:false,
      medicinesStyleId:null,
      total:'',
      Content:' ',
      price:'',
      styleImg:'',
      num:1,
      goodsList: [
        {id: 1, city: '广州市'},
        {id: 2, city: '上海市'},
        {id: 3, city: '北京市'},
        {id: 4, city: '北京市'},
      ],
      activeName: 'first',
      selectedButtonIndex1: null,
      selectedContent: '假一赔十 买贵必赔 退货运费险',
    }
  },
  updated() {
    // 使用 Vue.nextTick 等待DOM更新后执行
    this.$nextTick(() => {
      const sidebar = document.querySelector('.fixed-sidebar');
      const scrollThreshold = 800; // 设置滚动显示的阈值，根据需要调整
      if (sidebar) {
        window.addEventListener('scroll', function(event) {
          if (window.scrollY > scrollThreshold) {
            sidebar.style.display = 'block';
          } else {
            sidebar.style.display = 'none';
          }
        });
      }
    });
  },
  created() {
    this.loadMedicines()
    this.loadAddress()
    this.loadUserComment()
    this.loadCollect()
  },
  methods:{
    addCart(){
      if (this.Content=== " ") {
          this.$message.error("请选择规格");
          return;
      }
      let data={
        num:this.num,
        totalPrice:this.total,
        businessId:this.businessId,
        medicinesStyleId:this.medicinesStyleId,
        medicinesId:this.medicinesId,
      }
      this.$request.post('/cart/add',data).then(res=>{
        if(res.code==='200'){
          this.$message.success("操作成功")
        }else {
          this.$message.error(res.msg)
        }
      })
    },
    pay() {
      console.log(this.Content)
      if (!this.addressId) {
        this.$message.warning('请选择收货地址')
        return
      }
      if (this.Content=== '') {
          this.$message.warning("请选择规格");
          return;
      }
      let data={
        num:this.num,
        medicinesId:this.medicinesId,
        price:this.price,
        totalPrice:this.total,
        businessId:this.businessId,
        medicinesStyleId:this.medicinesStyleId,
        addressId:this.addressId,
        status: '待发货',
      }
      this.$confirm('请支付订单', '确认支付', {type: "warning"}).then(response => {
        this.$request.post('/order/pay', data).then(res => {
          if (res.code === '200') {
            this.$message.success('操作成功')
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
      })
    },
    loadCollect() {
      this.$request.get('/collect/selectByUserId', {
        params: {
          userId: this.user.id,
          fid:this.medicinesId,
          module:'MEDICINES'
        }
      }).then(res => {
        if (res.data!==null) {
          this.collectStar = true
        }
      })
    },
    collect(){
      let data={}
      if (this.user.role === 'DOCTOR') {
        // 如果用户是医生，使用 doctorId
        data = {
          doctorId: this.user.id,
          fid: this.medicinesId,
          module:'MEDICINES'
        };
      } else if (this.user.role === 'USER') {
        // 如果用户是用户，使用 userId
        data = {
          userId: this.user.id,
          fid: this.medicinesId,
          module:'MEDICINES'
        };
      }
      this.collectStar = !this.collectStar;
      this.$request.post('/collect/save',data).then(res=>{
        if(res.code==='200'){
          this.$message.success('收藏成功')
        }else {
          this.$message.error(res.msg)
        }
      })
    },
    changeStyleImg(item){
      this.styleImg=item.stylePhoto
    },
    changePrice(buttonText,index){
      this.medicinesStyleId=buttonText.id
      this.price=this.medicineData.medicinesStyleList[index].price
      this.Content=buttonText
      this.selectedButtonIndex1=index
      this.total=this.price*this.num
    },
    handleClick(tab, event) {
      this.activeName = tab.name
    },
    handleChange(value) {
      // 更新 num 数据属性
      this.num = value;
    },
    handleCommand(command) {
      const selectedAddress = this.addressData.find(item => item.id === command);
      if (selectedAddress) {
        this.addressId = selectedAddress.id;
        this.selectedAddress = selectedAddress.address;
      }
    },
    loadMedicines() {
      this.$request.get(`/medicines/selectDetailById/${this.medicinesId}`).then(res => {
        if (res.code === '200') {
          // 按销量从高到低排序
          this.medicineData = res.data;
          this.businessId=this.medicineData.businessId
          this.price=this.medicineData.medicinesStyleList[0].price
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    loadMedicinesStyle(StyleId) {
      this.$request.get('/medicines/selectByTypeName', {params: {typeName}}).then(res => {
        if (res.code === '200') {
          // 按销量从高到低排序
          this.medicinesByTypeNameData = res.data.sort((a, b) => b.count - a.count);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    loadAddress(){
      this.$request.get('/address/selectAll/').then(res => {
        if (res.code === '200') {
          // 按销量从高到低排序
          this.addressData = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    loadUserComment(){
      this.$request.get(`/userComment/selectByMedicinesId/${this.medicinesId}`).then(res => {
        if (res.code === '200') {
          // 按销量从高到低排序
          this.userCommentData = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    computeButtonWidth(buttonText) {
      // 根据buttonText的长度计算按钮的最小宽度
      return `${buttonText.length * 14}px`;
    },

  }
}
</script>

<style scoped>
.fixed-sidebar {
  position: fixed;
  top: 80px;
  right: 250px;
  width: 350px;
  height: 550px;
  background-color: #ffffff;
  border-radius: 10px;
  z-index: 1000;
  overflow-y: auto;
  display: none;
}
.mains-content {
  min-height: 100vh;
  width: 100%;
  height: 100%;
  background-color: #ffffff;

}

.el-dropdown-menus {
  min-width: 150px;
}

.el-dropdown-link, img {
  cursor: pointer; /* 鼠标指针样式为指针 */
}

/* 容器元素，设置滚动条样式 */
.scrollbar-class::-webkit-scrollbar {
  width: 5px; /* 宽度 */
  height: 5px; /* 高度 */

}

/* 滚动条轨道 */
.scrollbar-class::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道背景色 */
  border-radius: 5px; /* 圆角 */
}

/* 滚动条滑块 */
.scrollbar-class::-webkit-scrollbar-thumb {
  background: #888; /* 滑块背景色 */
  border-radius: 5px; /* 圆角 */
  width: 6px; /* 设置滑块的宽度 */
  height: 10px; /* 设置滑块的高度 */
}

/* 鼠标悬停时的滑块样式 */
.scrollbar-class::-webkit-scrollbar-thumb:hover {
  background: #555; /* 滑块背景色 */
}

/* 滚动条边角 */
.scrollbar-class::-webkit-scrollbar-corner {
  background: transparent; /* 边角背景色 */
}

.is-active {
  background-color: #FFF7F3; /* 选中状态的背景颜色示例 */
  color: #FF5000; /* 文本颜色 */
  border-color: #FF5000; /* 边框颜色 */
}
.item{
   color: #ff6200;
   margin-left: 5px;
   cursor: pointer;
}
.item:hover {
  color: #0cb95f;
}
</style>


